<template>
    <div>
        <!-- 顶部导航栏区域 -->
        <nav-comp :back="true" title="地址列表"></nav-comp>
        <gap-comp :height="1"></gap-comp>
        <!-- 地址列展示区域 -->
        <van-address-list v-model="choseAddressId" :list="list" default-tag-text="默认" @add="onAdd" @edit="onEdit"
            @select="goBack" />
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            choseAddressId: '1',//默认选中地址的id
            list: [],//收获地址数据
            type: 1,
            uid: this.$utils.getUid()//用户的uid
        };
    },
    mounted() {
        // 获取全部的地址数据
        this.getUserAddress()
        // 获取默认选中的数据id  注意地址是number类型
        this.choseAddressId = Number(this.$route.query.addressId)
    },
    methods: {
        // 获取用户的收货地址
        getUserAddress() {
            this.$api.reqGetAddress({ uid: this.uid })
                .then(res => {
                    // 赋值地址展示需要的字段
                    if (res != null) {
                        this.list = res.map(item => {
                            return {
                                id: item.id,
                                name: item.username,
                                tel: item.userphone,
                                address: item.useraddress,
                                isDefault: item.status == 1 ? true : false,
                            }
                        })
                    }
                })
                .catch(err => console.log(err))
        },
        // 切换收获地址到订单确认页面
        async goBack(info) {
            await this.$utils.delay(2000)
            // 注意地址栏传值一定字符串格式化JSON.stringify  
            this.$router.push("/orderconfirm?address=" + JSON.stringify(info))
        },
        // 跳转到添加页面
        onAdd() {
            this.$router.push("/addressadd")
        },
        // 跳转到编辑页面
        onEdit() {
            this.$router.push("/addressadd")
        }
    },
};
</script>
  
<style scoped></style>
  